<template>
    <div class="home-page">
        <site-header></site-header>
        <site-menus></site-menus>
        <div class="content">
            <div class="first">首页->资金监督->区直资金</div>
            <div class="line"></div>
            <div class="top">
                <Select v-model="model1" style="width:210px">
                    <Option v-for="item in Community" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Select v-model="model2" style="width:230px" class="top-header">
                    <Option v-for="item in name" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Select v-model="model3" style="width:210px" class="top-header">
                    <Option v-for="item in year" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Input v-model="value" class="top-header" placeholder="受益人姓名" style="width: 200px" />
                <Input v-model="value" class="top-header" placeholder="身份证号码" style="width: 308px" />
                <Button class="top-select">查询</Button>
            </div>
            <div class="table">
                <Table border :columns="columns1" :data="data1" class="columns">
                    <template slot="action">
                        <Button size="small" class="actionBtn" @click="look">查看/举报</Button>
                    </template>
                </Table>
            </div>
            <modal v-model="listModel" width="80%" footer-hide>
                <reporting-info></reporting-info>
                <project-complaint :list="selectList"></project-complaint>
            </modal>
            <div class="page">
                <Page :total="100" show-sizer />
            </div>
        </div>
    </div>
</template>

<script>

import SiteMenus from '../home/compoments/site-menus/index'
import SiteHeader from '../home/compoments/site-header/index'
import ReportingInfo from './components/reporting-info/index'
import ProjectComplaint from '../fund-supervision/components/project-complaint/index'
export default {
  components: { ProjectComplaint, ReportingInfo, SiteHeader, SiteMenus },
  data () {
    return {
      listModel: false,
      selectList: [
        {
          content: '无领取资格'
        },
        {
          content: '金额不对'
        },
        {
          content: '重新发放'
        },
        {
          content: '数据有误'
        },
        {
          content: '对象已死亡'
        },
        {
          content: '其他'
        }
      ],
      Community: [
        {
          value: '社区',
          label: '社区'
        }
      ],
      name: [
        {
          value: '资金名称',
          label: '资金名称'
        }
      ],
      year: [
        {
          value: '2019年',
          label: '2019年'
        }
      ],
      columns1: [
        {
          title: '姓名/单位名称',
          align: 'center',
          key: 'name',
          width: 240
        },
        {
          title: '证件号',
          align: 'center',
          key: 'number',
          width: 170
        },
        {
          title: '发放时间',
          align: 'center',
          key: 'time',
          width: 157
        },
        {
          title: '金额（元）',
          align: 'center',
          key: 'money',
          width: 150
        },
        {
          title: '街道/乡镇',
          align: 'center',
          key: 'town',
          width: 150
        },
        {
          title: '社区/村',
          align: 'center',
          key: 'village',
          width: 160
        },
        {
          title: '补贴项目名称',
          align: 'center',
          key: 'subsidyName',
          width: 240
        },
        {
          title: '操作',
          align: 'center',
          slot: 'action',
          width: 140
        }
      ],
      data1: [
        {
          name: '姚岚',
          number: '210106*********021',
          time: '2019-02-28',
          money: '2340.00',
          town: '无',
          village: '无',
          subsidyName: '普惠制就业培训补贴'
        },
        {
          name: '胡天缘',
          number: '210114*********024',
          time: '2019-02-28',
          money: '2340.00',
          town: '无',
          village: '无',
          subsidyName: '普惠制就业培训补贴'
        },
        {
          name: '赵光璨',
          number: '210112*********624',
          time: '2019-02-28',
          money: '2630.00',
          town: '无',
          village: '无',
          subsidyName: '普惠制就业培训补贴'
        },
        {
          name: '赵欢',
          number: '210105*********986',
          time: '2019-02-28',
          money: '1990.00',
          town: '无',
          village: '无',
          subsidyName: '普惠制就业培训补贴'
        },
        {
          name: '周永',
          number: '210112*********616',
          time: '2019-02-28',
          money: '3630.00',
          town: '无',
          village: '无',
          subsidyName: '普惠制就业培训补贴'
        },
        {
          name: '张茜',
          number: '210106*********741',
          time: '2019-02-28',
          money: '970.00',
          town: '无',
          village: '无',
          subsidyName: '普惠制就业培训补贴'
        },
        {
          name: '赵瀛',
          number: '210106*********521',
          time: '2019-02-28',
          money: '3290.00',
          town: '无',
          village: '无',
          subsidyName: '普惠制就业培训补贴'
        },
        {
          name: '高艳芹',
          number: '211323*********255',
          time: '2019-02-28',
          money: '3755.00',
          town: '无',
          village: '无',
          subsidyName: '普惠制就业培训补贴'
        },
        {
          name: '毛立国',
          number: '239004*********113',
          time: '2019-02-28',
          money: '3630.00',
          town: '无',
          village: '无',
          subsidyName: '普惠制就业培训补贴'
        },
        {
          name: '张海丽',
          number: '210123*********424',
          time: '2019-02-28',
          money: '3290.00',
          town: '无',
          village: '无',
          subsidyName: '普惠制就业培训补贴'
        }
      ],
      model1: '社区',
      model2: '资金名称',
      model3: '2019年',
      value: ''
    }
  },
  methods: {
    look () {
      this.listModel = true
    }
  },
  mounted () {

  }
}
</script>

<style scoped lang="less">
    .home-page{
        height: 100%;
        overflow: scroll;
    }
    .content {
        height: 1000px;
        width: 94%;
        margin-left: 3%;
    }
    .first{
        font-size: 20px;
        color: black;
        font-weight: bolder;
        margin-left: 40px;
        height: 60px;
        line-height: 60px;
    }
    .line{
        height: 5px;
        background-color: #0166b6;
    }
    .top{
        margin-top: 30px;
        &-header{
            margin-left: 20px;
        }
        &-select{
            margin-left: 20px;
            width: 150px;
            background-color: #0166b6;
            color: white;
        }
    }
    .actionBtn{
        background-color: #2E87CB;
        color: white;
    }
    .table{
        margin-top: 20px;
    }
    .columns /deep/ tr{
        height: 55px;
    }
    .page{
        text-align: center;
        margin-top: 20px;
    }
</style>
